<template>
  <BasicModal
    v-bind="$attrs"
    :title="props.title"
    @register="registerModal"
    width="700px"
    @ok="handleSubmit"
    @cancel="closeFunc"
  >
    <PageWrapper>
      <!-- <p class="h-20" v-for="index in 20" :key="index">根据屏幕高度自适应</p> -->
      <BasicForm
        @register="register"
        :showSubmitButton="false"
        :model="modelRef"
        :showResetButton="false"
      />
    </PageWrapper>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { PageWrapper } from '@/components/Page';
  import { BasicForm, useForm } from '@/components/Form';
  import { addAddressBook, updateAddressBookApi, getDeatialData } from '@/api/pubInfo/index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { addresSchemas, customerSchemas, tableColumns } from './addBook';

  const emit = defineEmits(['close']);
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    configCode: {
      type: String,
      default: 'eslogis_warehouse',
    },
  });
  const modelRef = ref({});
  const tempId = ref('');
  const { createMessage } = useMessage();
  console.log('configCode', props.configCode);

  const [registerModal, { closeModal }] = useModalInner((data) => {
    data && onDataReceive(data);
  });
  //  setFieldsValue: setFieldsValueWarehouse,
  const schemasObj = {
    eslogis_warehouse: addresSchemas,
    eslogis_customer: customerSchemas,
    eslogis_material: tableColumns,
  };
  const [register, { validate, resetFields }] = useForm({
    layout: 'vertical',
    baseColProps: {
      span: 6,
    },
    schemas: schemasObj[props.configCode],
    // showActionButtonGroup: false,
  });
  function onDataReceive(data) {
    tempId.value = data.id;
    getDeatialData({ id: data.id }).then((res) => {
      const tempData = res;
      if (res.consigneeProvince) {
        tempData.area1 = [res.consigneeProvince, res.consigneeCity, res.consigneeArea];
      }
      if (data.receiverProvince) {
        tempData.area = [res.receiverProvince, res.receiverCity, res.receiverArea];
      }
      modelRef.value = tempData;
    });
  }
  onMounted(() => {
    console.log('onMounted', props.configCode);
    nextTick(() => {
      console.log('onMountednextTick');
    });
  });
  function closeFunc() {
    console.log('===================closeFunc', tempId.value);
    tempId.value = '';
    resetFields();
  }
  async function handleSubmit() {
    try {
      const [values] = await Promise.all([validate()]);
      console.log('form data:', values);
      const params = { configCode: props.configCode, data: values };
      console.log('values', tempId.value);
      const updateOraddAPI = tempId.value ? updateAddressBookApi : addAddressBook;
      if (tempId.value) {
        params.id = tempId.value;
      }
      updateOraddAPI(params).then((res) => {
        console.log(res);

        createMessage.success('处理成功');
        resetFields();
        closeModal();
        tempId.value = '';
        emit('reload');
      });
    } catch (error) {
      console.log(error);
    }
  }
</script>
